<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react/react17.development.js"></script>
    <script src="../react/react-dom17.development.js"></script>
    <script src="../react/babel.min.js"></script>
    <style>
        .aaa {
            color: red;
        }

        .bbb {
            color: green;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script type="text/babel">
        class Com extends React.Component {
            // 可以直接设置this.state属性的值 (会直接将这个state添加给this)
            state = {
                size: 50,
                isShow: true,
                action: "aaa",

            }
            stylea() {
                return { color: "red", fontSize: "30px" }
            }
            render() {
                let { size, isShow, action } = this.state;
                return (<div className="box">
                    <div style={{ color: "red", fontSize: size + "px" }}>这是第一个div</div>
                    <div style={this.stylea()}>这是第一个div</div>
                    <button onClick={() => {
                        this.setState({
                            action: "aaa",
                        })
                    }}
                    >aaaa</button>
                    <button onClick={() => {
                        this.setState({
                            action: "bbb",
                        })
                    }}>bbbbb</button>
                    <button onClick={() => {
                        this.setState({
                            action: "ccc",
                        })
                    }}>cccc</button>
                    <div className={action}>22222222</div>
                    <button onClick={() => {
                        this.setState({
                            isShow: !isShow,
                        })
                    }}>点击更改isshow</button>
                    <div className={isShow ? "aaa" : "bbb"}>333333</div>
                </div>)
            }

        }
        ReactDOM.render(<Com />, document.getElementById("main"))


    </script>
</body>

</html>